<template>
  <div class="control-video flex">
    <div class="info">
      <h1>Info</h1>
      <div class="list">
        <div v-for="(item, index) in infoList" :key="index" class="info-list">
          <p>{{ item }}</p>
        </div>
      </div>
    </div>
    <div class="video">
      <video width="100%" height="100%" autoplay="autoplay">
        <source src="@/assets/video/1.mp4" />
      </video>
      <video width="280" height="210" autoplay="autoplay" class="map">
        <source src="@/assets/video/2.mp4" />
      </video>
    </div>
    <div class="operation flex column">
      <div class="btn">
        <img
          src="@/assets/stop.jpg"
          class="pointer"
          width="60%"
          @click="changeBtnStatus"
          v-if="!btnStatus"
        />
        <img src="@/assets/record.jpg" width="60%" class="pointer" @click="changeBtnStatus" v-else />
        <time-meter dateNumber="10000"></time-meter>
      </div>
      <div class="direction flex column middle evenly">
        <img src="@/assets/move_up.png" width="60%" />
        <img src="@/assets/turn_dark.png" width="60%" />
      </div>
      <div class="set">
        <div class="setting">
          <i class="el-icon-setting"></i>
          <span class="pointer ml5">Settings</span>
          <div class="menu">
            <ul>
              <li>Battery and voltage setting</li>
              <li>Remote controller mode</li>
              <li>Disconnect and return to machines list</li>
              <li>Remote controller calibration</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TimeMeter from './TimeMeter'
export default {
  components: {
    TimeMeter
  },
  data() {
    return {
      btnStatus: false,
      infoList: [],
      time: 0
    }
  },
  mounted() {
    this.getTimer()
  },
  watch: {
    time(val) {
      switch (val) {
        case 10:
          this.infoList.unshift('发现行人 [0001]')
          break
        case 12:
          this.infoList.unshift('发现行人 [0002]、[0003]、[0004]')
          break
        case 27:
          this.infoList.unshift('发现行人 [0005]')
          this.infoList.unshift('发现发热物体 [0001]')
          break
        case 33:
          this.infoList.unshift('发现行人 [0006]')
          break
        case 38:
          this.infoList.unshift('发现行人 [0007]')
          break
        case 44:
          this.infoList.unshift('发现行人 [0008]')
          break
        case 50:
          this.infoList.unshift('发现发热物体 [0002]、[0003]')
          break
        case 54:
          this.infoList.unshift('发现行人 [0009]')
          break
        case 56:
          this.infoList.unshift('发现行人 [0010]、 [0011]')
          break
        case 61:
          this.infoList.unshift('发现行人 [0012]')
          break
      }
    }
  },
  methods: {
    changeBtnStatus() {
      this.btnStatus = !this.btnStatus
    },
    // 计时器
    getTimer() {
      setInterval(() => {
        this.time++
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.control-video {
  height: calc(100vh - 94px);
  .info {
    background: #23242f;
    color: #fff;
    width: 18%;
    h1 {
      background: #2c2d3a;
      margin: 0;
      padding: 10px;
      font-size: 18px;
    }
    .list {
      .info-list {
        p {
          white-space: nowrap;
          margin: 0;
          padding: 10px 20px;
          font-size: 12px;
          border-bottom: 1px solid #2c2d3a;
        }
      }
    }
  }
  .video {
    width: 67%;
    position: relative;
    background: #000;
    .map {
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
  .operation {
    position: relative;
    width: 15%;
    background: #23242f;
    text-align: center;
    .btn {
      padding: 10px 0;
      border-bottom: 1px solid #3b3c4e;
    }
    .direction {
      flex: 1;
    }
    .setting {
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      color: #fff;
      position: relative;
      background: linear-gradient(180deg, #4f5167 0%, #3b3c4e 9.38%);
      &:hover {
        span,
        .el-icon-setting {
          color: #288eff;
        }
        .menu {
          display: block;
        }
      }
      .menu {
        display: none;
        position: absolute;
        bottom: 0px;
        right: 100%;
        ul {
          list-style: none;
          padding: 0 20px;
          background: linear-gradient(180deg, #4f5167 0%, #3b3c4e 9.38%);
          color: #c5c6d3;
          li {
            white-space: nowrap;
            text-align: left;
            cursor: pointer;
            &:hover {
              color: #288eff;
            }
          }
        }
      }
    }
  }
}
</style>
